<style lang='scss' type='stylesheet/scss' scoped>
.as-button {
  margin-bottom: 10px;
}
</style>
<template>
  <div>
    <as-h2>placement</as-h2>
    <as-card :text="text"
             title="placement 提供弹出框的展示方向，拥有 top 上方 / right 右方 / bottom 下方 / left 左方 四个值，默认为 top">
      <as-popover title="提示" content="这是一个基础按钮" placement="top">
        <as-button>基础按钮</as-button>
      </as-popover>
      <as-popover title="提示" content="这是一个成功按钮" placement="bottom">
        <as-button type="success">成功按钮</as-button>
      </as-popover>
      <as-popover title="提示" content="这是一个警告按钮" placement="left">
        <as-button type="warning">警告按钮</as-button>
      </as-popover>
      <as-popover title="提示" content="这是一个危险按钮" placement="right">
        <as-button type="danger">危险按钮</as-button>
      </as-popover>
    </as-card>
  </div>
</template>

<script type="text/ecmascript-6">
import { mapGetters } from "vuex";
export default {
  name: "",
  computed: {
    ...mapGetters(["isMobile"])
  },
  data() {
    return {
      text: `<template>
   <div>
     <as-popover title="提示" content="这是一个基础按钮" placement="top">
       <as-button>基础按钮</as-button>
     </as-popover>
     <as-popover title="提示" content="这是一个成功按钮" placement="bottom">
       <as-button type="success">成功按钮</as-button>
     </as-popover>
     <as-popover title="提示" content="这是一个警告按钮" placement="left">
       <as-button type="warning">警告按钮</as-button>
     </as-popover>
     <as-popover title="提示" content="这是一个危险按钮" placement="right">
       <as-button type="danger">危险按钮</as-button>
     </as-popover>
   </div>
 </template>`
    };
  },
  methods: {}
};
</script>
